<template>
  <div>
    <!-- 顶部横幅 -->
    <div class="top-banner">
      <div class="container">
        <div class="top-banner-content">
          <span>Trae IDE 已支持 Doubao-Seed-1.6模型,推理更快、准确度更高、稳定性更强</span>
          <button class="experience-btn">立即体验→</button>
        </div>
      </div>
    </div>

    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="container">
        <div class="navbar-content">
          <div class="navbar-left">
            <div class="logo">
              <div class="logo-icon"></div>
              <span>稀土掘金</span>
            </div>
            <ul class="nav-links">
              <li><router-link to="/" class="nav-link">首页</router-link></li>
              <li>
                <a href="#">AI Coding</a>
                <span class="new-tag">NEW</span>
              </li>
              <li><a href="#">沸点</a></li>
              <li><router-link to="/courses" class="nav-link">课程</router-link></li>
              <li><a href="#">直播</a></li>
              <li><a href="#">活动</a></li>
              <li><a href="#">AI刷题</a></li>
              <li><a href="#">APP</a></li>
              <li><router-link to="/admin/login">后台管理系统</router-link></li>
            </ul>
          </div>
          <div class="navbar-right">
            <div class="search-bar">
              <span class="search-icon">🔍</span>
              <input type="text" class="search-input" placeholder="探索稀土掘金">
            </div>
            <router-link to="/creator-center" class="btn btn-secondary">创作者中心 ▼</router-link>
            <a href="#" class="btn btn-secondary">👑</a>
            
            <!-- 用户登录/头像区域 -->
            <div class="user-area">
              <!-- 未登录状态显示登录按钮 -->
              <a v-if="!isLoggedIn" href="#" class="btn btn-primary" @click.prevent="$emit('open-login')">登录</a>
              
              <!-- 登录成功后显示头像 -->
              <div v-else class="user-avatar-container" @click="toggleUserPanel">
                <div class="user-avatar" :style="{ backgroundImage: `url(${userInfo.avatar || '/touxiang.jpg'})` }"></div>
                
                <!-- 用户信息面板 -->
                <div v-if="showUserPanel" class="user-panel">
                  <div class="user-panel-header">
                    <div class="user-panel-avatar" :style="{ backgroundImage: `url(${userInfo.avatar || '/touxiang.jpg'})` }"></div>
                    <div class="user-panel-info">
                      <div class="user-panel-name">{{ userInfo.nickname }}</div>
                      <div class="user-panel-level">
                        掘友等级 JV.1
                        <span style="margin-left: auto;">7.5 / 15</span>
                      </div>
                      <div class="level-progress">
                        <div class="level-progress-bar"></div>
                      </div>
                    </div>
                  </div>
                  
                  <div class="user-panel-stats">
                    <div class="stat-item">
                      <div class="stat-value">1</div>
                      <div class="stat-label">关注</div>
                    </div>
                    <div class="stat-item">
                      <div class="stat-value">0</div>
                      <div class="stat-label">赞过</div>
                    </div>
                    <div class="stat-item">
                      <div class="stat-value">0</div>
                      <div class="stat-label">收藏</div>
                    </div>
                  </div>
                  
                  <div class="user-panel-menu">
                    <div class="menu-item" @click="goToProfile">
                      <div class="menu-icon">👤</div>
                      我的主页
                    </div>
                    <div class="menu-item" @click="goToGrowthBenefits">
                      <div class="menu-icon">🎁</div>
                      成长福利
                    </div>
                    <div class="menu-item" @click="goToContentNotes">
                      <div class="menu-icon">📝</div>
                      内容笔记
                    </div>
                    <div class="menu-item" @click="goToMemberCenter">
                      <div class="menu-icon">🔑</div>
                      会员中心
                    </div>
                    <div class="menu-item" @click="goToCourseCenter">
                      <div class="menu-icon">📚</div>
                      课程中心
                    </div>
                    <div class="menu-item" @click="goToMyDiscounts">
                      <div class="menu-icon">🏷️</div>
                      我的优惠
                    </div>
                    <div class="menu-item" @click="goToMyRegistrations">
                      <div class="menu-icon">📋</div>
                      我的报名
                    </div>
                    <div class="menu-item" @click="goToMyFootprints">
                      <div class="menu-icon">👣</div>
                      我的足迹
                    </div>
                  </div>
                  
                  <div class="user-panel-footer">
                    <div class="settings-link" @click="goToSettings">我的设置</div>
                    <div class="logout-link" @click="$emit('logout')">退出登录</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </div>
</template>

<script>
export default {
  name: 'HeaderComponent',
  props: {
    isLoggedIn: {
      type: Boolean,
      default: false
    },
    userInfo: {
      type: Object,
      default: () => ({
        username: '',
        avatar: ''
      })
    },
    showUserPanel: {
      type: Boolean,
      default: false
    }
  },
  emits: ['open-login', 'toggle-user-panel', 'logout'],
  methods: {
    toggleUserPanel() {
      this.$emit('toggle-user-panel');
    },
    goToProfile() {
      if (!this.isLoggedIn) {
        this.$emit('open-login');
        return;
      }
      this.$router.push('/profile');
      this.$emit('toggle-user-panel'); // 关闭用户面板
    },
    goToGrowthBenefits() {
      if (!this.isLoggedIn) {
        this.$emit('open-login');
        return;
      }
      this.$router.push('/growth-benefits');
      this.$emit('toggle-user-panel'); // 关闭用户面板
    },
    goToMemberCenter() {
      if (!this.isLoggedIn) {
        this.$emit('open-login');
        return;
      }
      this.$router.push('/member-center');
      this.$emit('toggle-user-panel'); // 关闭用户面板
    },
    goToContentNotes() {
      if (!this.isLoggedIn) {
        this.$emit('open-login');
        return;
      }
      this.$router.push('/content-notes');
      this.$emit('toggle-user-panel'); // 关闭用户面板
    },
    goToCourseCenter() {
      if (!this.isLoggedIn) {
        this.$emit('open-login');
        return;
      }
      this.$router.push('/course-center');
      this.$emit('toggle-user-panel'); // 关闭用户面板
    },
    goToMyDiscounts() {
      if (!this.isLoggedIn) {
        this.$emit('open-login');
        return;
      }
      this.$router.push('/my-discounts');
      this.$emit('toggle-user-panel'); // 关闭用户面板
    },
    goToMyRegistrations() {
      if (!this.isLoggedIn) {
        this.$emit('open-login');
        return;
      }
      this.$router.push('/my-registrations');
      this.$emit('toggle-user-panel'); // 关闭用户面板
    },
    goToMyFootprints() {
      if (!this.isLoggedIn) {
        this.$emit('open-login');
        return;
      }
      this.$router.push('/my-footprints');
      this.$emit('toggle-user-panel'); // 关闭用户面板
    },
    goToSettings() {
      if (!this.isLoggedIn) {
        this.$emit('open-login');
        return;
      }
      this.$router.push('/user/settings/profile');
      this.$emit('toggle-user-panel'); // 关闭用户面板
    }
  }
}
</script>

<style scoped>
/* 顶部横幅样式 */
.top-banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 8px 0;
  font-size: 14px;
}

.container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
}

.top-banner-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.experience-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.experience-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 导航栏样式 */
.navbar {
  background: white;
  border-bottom: 1px solid #e4e6eb;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}

.navbar-left {
  display: flex;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  margin-right: 40px;
  font-size: 20px;
  font-weight: bold;
  color: #1e80ff;
}

.logo-icon {
  width: 32px;
  height: 32px;
  background: #1e80ff;
  border-radius: 6px;
  margin-right: 8px;
}

.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 40px;
}

.nav-links li {
  position: relative;
}

.nav-links a,
.nav-links .nav-link {
  text-decoration: none;
  color: #1d2129;
  font-size: 16px;
  padding: 8px 0;
  transition: color 0.2s;
}

.nav-links a:hover,
.nav-links .nav-link:hover {
  color: #1e80ff;
}

.nav-links .router-link-active {
  color: #1e80ff;
}

.new-tag {
  position: absolute;
  top: -8px;
  right: -20px;
  background: #ff4757;
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 2px;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.search-bar {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 12px;
  color: #86909c;
  z-index: 1;
}

.search-input {
  padding: 8px 12px 8px 36px;
  border: 1px solid #e4e6eb;
  border-radius: 20px;
  width: 200px;
  font-size: 14px;
  background: #f7f8fa;
}

.search-input:focus {
  outline: none;
  border-color: #1e80ff;
  background: white;
}

.btn {
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.btn-primary {
  background: #1e80ff;
  color: white;
}

.btn-primary:hover {
  background: #1664cc;
}

.btn-secondary {
  background: transparent;
  color: #1d2129;
  border: 1px solid #e4e6eb;
}

.btn-secondary:hover {
  background: #f7f8fa;
}

/* 用户区域样式 */
.user-area {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.user-avatar-container {
  position: relative;
  cursor: pointer;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 2px solid #eee;
}

/* 用户面板样式 */
.user-panel {
  position: absolute;
  top: 50px;
  right: 0;
  width: 300px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
}

.user-panel-header {
  display: flex;
  padding: 16px;
  background-color: #f7f8fa;
  border-bottom: 1px solid #e4e6eb;
}

.user-panel-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  margin-right: 12px;
}

.user-panel-info {
  flex: 1;
}

.user-panel-name {
  font-weight: bold;
  margin-bottom: 4px;
}

.user-panel-level {
  font-size: 12px;
  color: #86909c;
  display: flex;
  margin-bottom: 4px;
}

.level-progress {
  height: 4px;
  background-color: #e4e6eb;
  border-radius: 2px;
  overflow: hidden;
}

.level-progress-bar {
  height: 100%;
  width: 50%;
  background-color: #1e80ff;
}

.user-panel-stats {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #e4e6eb;
}

.stat-item {
  flex: 1;
  text-align: center;
}

.stat-value {
  font-weight: bold;
}

.stat-label {
  font-size: 12px;
  color: #86909c;
}

.user-panel-menu {
  padding: 8px 0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
}

.menu-item:hover {
  background-color: #f7f8fa;
}

.menu-icon {
  margin-right: 8px;
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.user-panel-footer {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid #e4e6eb;
  font-size: 14px;
  color: #86909c;
}

.settings-link, .logout-link {
  cursor: pointer;
}

.settings-link:hover, .logout-link:hover {
  color: #1e80ff;
}
</style>